import { nanoid } from 'nanoid';
import { currentStage } from '../data/stage';
import { getMaxIndex, addShape } from '../event/shape.actions';
import { Barcode, DBarcode } from '../types/Barcode';
import { IType, type IShapeProps } from '../types/IShape';
import { ImageShape, DImageShape } from '../types/ImageShape';
import { Qrcode, DQrcode } from '../types/Qrcode';
import { RectShape } from '../types/RectShape';
import { TextShape, DynamicText } from '../types/TextShape';
import { getTextDomRect } from './dom.utils';
import { previewBarCode, previewQrCode } from '@/api/modules/utils/utils';
import { DVideoShape } from '../types/VideoShape';

/* 创建公共类型 */
export const createShape = (config: IShapeProps) => {
  config.x = Math.round(currentStage.value.w / 2 - config.w / 2);
  config.y = Math.round(currentStage.value.h / 2 - config.h / 2);
  config.id = nanoid();
  config.z = getMaxIndex() + 1;
  addShape(JSON.parse(JSON.stringify(config)));
};

/**
 * 注释: 创建一个矩形
 *
 * */
export const createRect = () => {
  createShape(new RectShape());
};

/* 创建文本类型 */
export const createText = () => {
  const textConfig = new TextShape();

  textConfig.w = 80;
  textConfig.h = 30;
  // var rect = getTextDomRect(textConfig);
  // textConfig.w = Math.round(rect.width);
  // textConfig.h = Math.round(rect.height);
  textConfig.text = 'text';
  createShape(textConfig);
};

/* 创建qrcode类型 */

export const createQrcode = async () => {
  const qrconfig = new Qrcode();

  const { data } = await previewQrCode({
    text: qrconfig.text,
    /* 二维码的大小 */
    size: qrconfig.size,
    bgcolor: qrconfig.bgcolor,
    textColor: qrconfig.textColor,
    margin: qrconfig.margin,
  });
  if (data.code === 200) {
    qrconfig.src = data.data;
    createShape(qrconfig);
  }
};

/* 创建动态qrcode类型 */

export const createDynamicQrcode = async () => {
  const qrconfig = new DQrcode();
  createShape(qrconfig);
};

/* 创建barcode类型 */

export const createBarcode = async () => {
  const barcode = new Barcode();
  const { data } = await previewBarCode({
    bgcolor: barcode.bgcolor,
    showText: barcode.showText,
    text: barcode.text,
    textColor: barcode.textColor,
    w: barcode.w,
    h: barcode.h,
    margin: barcode.margin,
    rotate: '0',
  });
  if (data.code === 200) {
    barcode.src = data.data;
    createShape(barcode);
  }
};

/* 创建动态barcode类型 */

export const createDynamicBarcode = () => {
  const barcode = new DBarcode();
  createShape(barcode);
};
/* 创建图片类型 */

export const createImage = async (src?: string) => {
  const imageConfig = new ImageShape();
  if (src) {
    imageConfig.src = src;
    imageConfig.cacheSrc = src;
  }
  createShape(imageConfig);
  return imageConfig;
};
/* 创建动态图片类型 */

export const createDynamicImage = async () => {
  const imageConfig = new DImageShape();
  createShape(imageConfig);
  return imageConfig;
};

/* 创建动态文字 */

export const createDynamicText = async (
  text: string,
  fieldCode: string,
  fieldId: string,
  fieldType: 0 | 1 | 2,
) => {
  const config = new DynamicText();
  config.type = IType.DTEXT;
  config.text = text;
  config.fieldId = fieldId;
  config.fieldCode = fieldCode;

  config.fieldType = fieldType;
  const rect = getTextDomRect(config);
  config.w = parseInt(`${rect.width}`, 10);
  config.h = parseInt(`${rect.height}`, 10);
  config.lineHeight = rect.height;
  createShape(config);
};

export const createVideo = () => {
  // @ts-ignore
  const config = new VideoShape();
  createShape(config);
};

export const createDVideo = () => {
  const config = new DVideoShape();
  createShape(config);
};
export const getFileName = (path: string) => {
  return path.replace(/(.*\/)*([^.]+).*/gi, '$2');
};
